TECH CAMP Banner
概要
プログラミングスクールTECH CAMPのバナー制作依頼
制作プロセス
リンク先とのイメージのがギャップが無いように制作
- 制作期間：3日間
- 担当箇所：デザイン
- 使用ツール：Illustrator、Photoshop
プロセス
クライアント調査
- 業務内容
- プログラミングスキルを身に着けるテックキャンプ 未経験から
エンジニア転職を実現するテックキャンプ エンジニア転職を運営 - 理念・
ビジョン - 人生にサプライズを 誰かの人生を幸せにする機会を提供すること
すべての人が幸せに生きる世界を作る - 競合他社
- 侍エンジニア DMM WEBCAMP ヒューマンアカデミー
- 補足情報
- divクレド 主体的に動く 理解に徹する 感謝を伝える
出来な事に挑戦する 他社に貢献する
ターゲットの具体化
- 年齢
- 20〜30代
- 性別
- 男女共に
- サービスの認知
- 株式会社div 代表のYouTube動画 twitter Facebook
- 閲覧
ページ - 侍エンジニア DMMWEBCAMP ヒューマンアカデミー
YouTube twitter Facebook Instagram YahooJapan - 状況
- 現状に不満がある２〜30代の男女が通勤時間や自宅での隙間時間で
発見 独学では自信が無いので教えてもらいながら学習したい。
参考デザインのピックアップ
エンジニア関連、パソコンを持って
いるなど関連が深そうなバナーを選択。
数字やテキストを強調し、インパクトを
感じたバナーを選択。
デザイン作成
モノクロでのレイアウト案
背景あり、無しで３パターンずつ作りました。「完全無料」や「限定特典あり」といったインパクトの強いワードを
強調させました。余白を意識してテキストのレイアウトや与える情報の取捨選択を行いました。
配色
リンク先のページとイメージが変わらないように且つ、＃333333と＃a32032を
組み合わせることでアクセントを付けページ内で埋もれない配色を行いました。
テキストカラー
#333333
ベースカラー
＃ffffffと相性が良く視認性が良い為
ベースカラー
#ffffff
様々なアクセントを入れても喧嘩しない為
メインカラー
#a932032
注目を集め、バナーをクリックしてもらう為
アクセントカラー
#a932032
「完全無料」等インパクトの強いキーワードをより強調させる為
フォント
サイズ展開
サイズ展開を行うと与えられる情報が限られてくるので、バナーそのものを目立たせることが出来るA32032#a32032を使用し、「完全無料」のキーワードに視線を誘導できるように、サイズ、カラーの変更を行いました。
最終的な制作物
300x250サイズでは当初ロゴが背景と同化気味であった為＃fffffのグラデーションを追加しました。こういった細かな工夫一つで印象が大きく左右すると知りました。限られた範囲でどの情報をどういった形で伝えるかが大切な事だと学びました。